<template>
  <view class="container">
    <view class="input-content">
      <view class="input-item">
        <text class="tit">账号</text>
        <input class="itemIpt" :value="phone" id="phone" type="text" placeholder="请输入手机号码" />
      </view>
      <view class="input-item">
        <text class="tit">密码</text>
        <input class="itemIpt" :value="password" id="password" type="password" placeholder="请输入密码" />
        <text class="forget">忘记密码？</text>
      </view>
    </view>

    <button class="confirm-btn" type="primary">登录</button>
    <view class="other">使用其他账号登录</view>
    <button @click="login" class="confirm-btn" type="primary">
      <image class="confirm-img" src="../../static/images/weixin.png" mode=""></image>
      微信登录
    </button>
    <button class="confirm-btn" type="warn">
      <image class="confirm-img" src="../../static/images/phone.png" mode=""></image>
      手机短信登录
    </button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        phone: '',
        password: ''
      };
    },
    methods: {
      login() {
        wx.getUserProfile({
          desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
          success: (res) => {
            uni.setStorageSync('userInfo',res.userInfo)
            
            uni.switchTab({
              url:'/pages/center/center',
              success() {
                uni.showToast({
                  title: '登录成功',
                  icon: 'success',
                  duration: 2000,
                })
              }
            })
          }
        })
      }
    }
  }
</script>

<style lang="stylus">
.container
  height: 100%
  width: 100%
  background-color: #ddd
  .input-content
    padding: 0 20upx
    .input-item
      display:flex
      align-items:flex-start
      background:#f8f6fc
      height: 80upx
      border-radius: 4px
      margin-bottom: 10upx
      .tit
        font-size: 30upx
        margin: 20upx 0 0 20upx
      .itemIpt
        font-size: 30upx
        padding: 14upx 0 0 110upx
      .forget
        color: #777
        font-size: 30upx
        padding:20upx 0 0 40upx
  .confirm-btn
    margin: 20upx 20upx
    position: relative
    
    .confirm-img
      width: 80upx
      height: 80upx
      box-sizing: border-box
      position: absolute
      top: 20upx
      left: 20upx
  .other
    text-align: center
    color: #999
    height: 100upx
    line-height: 100upx
    font-size: 32upx
</style>
